<template>
  <div class="loginBg">
    <el-container>
      <el-header style="padding: 0">
        <el-row :gutter="20" class="navRow">
          <el-col :span="11" class="navLeft"><a href="http://e.baidu.com/?refer=240" target="_blank"><h1
              data-v-602d9bcd="">百度营销</h1></a></el-col>
          <el-col :span="13" class="navRight">
            <el-row>
              <el-col :span="4"
                      class="nav-1 nav-3"
              ><a href="#" class="nav-A">营销资源

              </a>
                <div class="container">
                  <div class="item"><a target="_blank"
                                       href="https://yingxiao.baidu.com/new/index.php/home/topic/detail?no=641&name=index&ly=nav_list&castk=LTE%3D"
                                       class="text-blue-800 hover:text-blue-600">百度APP</a></div>
                  <div class="item"><a target="_blank"
                                       href="https://yingxiao.baidu.com/new/topic/643/index?ly=nav_list"
                                       class="text-blue-800 hover:text-blue-600">百度地图</a></div>
                  <div class="item"><a target="_blank"
                                       href="https://yingxiao.baidu.com/new/topic/644/index?ly=nav_list"
                                       class="text-blue-800 hover:text-blue-600">百度贴吧</a></div>
                  <div class="item"><a target="_blank"
                                       href="https://yingxiao.baidu.com/new/topic/634/index?ly=nav_list"
                                       class="text-blue-800 hover:text-blue-600">百青藤</a></div>
                  <div class="item"><a target="_blank"
                                       href="https://yingxiao.baidu.com/new/topic/642/index?ly=nav_list"
                                       class="text-blue-800 hover:text-blue-600">好看视频</a></div>
                  <div class="item"><a target="_blank"
                                       href="https://yingxiao.baidu.com/new/topic/640/index?ly=nav_list"
                                       class="text-blue-800 hover:text-blue-600">线下屏资源</a></div>
                </div>
              </el-col>
              <el-col class="nav-2 nav-3" :span="5"><a href="#"
                                                       class=" nav-A text-blue-800 hover:text-blue-600">营销产品
              </a>
                <div class="container">
                  <div class="item"><a target="_blank" href="https://yingxiao.baidu.com/edu"
                                       class="text-blue-800 hover:text-blue-600">搜索推广</a></div>
                  <div class="item"><a target="_blank" href="https://yingxiao.baidu.com/edu"
                                       class="text-blue-800 hover:text-blue-600">信息流推广</a></div>
                  <div class="item"><a target="_blank" href="https://yingxiao.baidu.com/edu"
                                       class="text-blue-800 hover:text-blue-600">品牌全景</a></div>
                  <div class="item"><a target="_blank" href="https://yingxiao.baidu.com/edu"
                                       class="text-blue-800 hover:text-blue-600">品牌专区</a></div>
                  <div class="item"><a target="_blank" href="https://yingxiao.baidu.com/edu"
                                       class="text-blue-800 hover:text-blue-600">聚屏</a></div>
                  <div class="item"><a target="_blank" href="https://yingxiao.baidu.com/edu"
                                       class="text-blue-800 hover:text-blue-600">基木鱼</a></div>
                  <div class="item"><a target="_blank" href="https://yingxiao.baidu.com/edu"
                                       class="text-blue-800 hover:text-blue-600">观星盘</a></div>
                  <div class="item"><a target="_blank" href="https://yingxiao.baidu.com/edu"
                                       class="text-blue-800 hover:text-blue-600">爱番番CRM</a></div>
                  <div class="item"><a target="_blank" href="https://yingxiao.baidu.com/edu"
                                       class="text-blue-800 hover:text-blue-600">百度智能小程序</a></div>
                  <div class="item"><a target="_blank" href="https://yingxiao.baidu.com/edu"
                                       class="text-blue-800 hover:text-blue-600">营销服务市场</a></div>
                  <div class="item"><a target="_blank" href="https://yingxiao.baidu.com/edu"
                                       class="text-blue-800 hover:text-blue-600">内容营销</a></div>

                </div>
              </el-col>
              <el-col class="nav-3" :span="5"><a target="_blank" href="https://yingxiao.baidu.com/case"
                                                 class="text-blue-800 hover:text-blue-600">案例中心</a>
              </el-col>
              <el-col class="nav-3" :span="5"><a target="_blank" href="https://yingxiao.baidu.com/edu"
                                                 class="text-blue-800 hover:text-blue-600">营销学堂</a>
              </el-col>
              <el-col class="nav-3" :span="5"><a target="_blank" href="https://yingxiao.baidu.com/insight"
                                                 class="text-blue-800 hover:text-blue-600">营销洞察</a>
              </el-col>

            </el-row>
          </el-col>
        </el-row>
      </el-header>
      <el-main style="display: flex;align-items: center;justify-content: space-between">
        <div class="bannerLeft">
          <div class="block" style="width: 812px;height: 392px;position: relative; overflow: hidden">
            <el-carousel trigger="click" height="392px">
              <el-carousel-item>
                <a data-v-5aa3520a=""
                   href="https://kaidian.baidu.com/mallshop/mallschool/572/578?contentId=452"
                   target="_blank" class="slider-item pull-left" style=""><img data-v-5aa3520a=""
                                                                               src="https://bj.bcebos.com/v1/bass-o-groove/app_file6e082964-becc-489b-8122-e9c5fa07acb1/%E7%99%BB%E9%99%86%E9%A1%B5.jpg"
                                                                               alt="">
                  <img data-v-5aa3520a=""
                       src="https://bj.bcebos.com/v1/bass-o-groove/app_file1ce7cce6-4637-4d1d-80c3-42fcf266b462/%E4%B8%80%E7%AB%99%E5%BC%8F%E6%9C%AA%E7%99%BB%E5%BD%95%E5%89%8D%E9%A6%96%E9%A1%B5%E8%BD%AE%E6%92%AD%E5%9B%BE.jpg"
                       alt="">
                </a>
              </el-carousel-item>

              <el-carousel-item>
                <a data-v-5aa3520a=""
                   href="https://kaidian.baidu.com/mallshop/mallschool/572/578?contentId=452"
                   target="_blank" class="slider-item pull-left" style="">
                  <img data-v-5aa3520a="" :src="banner2"
                       alt="">
                </a>
              </el-carousel-item>
              <el-carousel-item>

                <a data-v-5aa3520a="" href="https://aiagent.baidu.com/mbot/index" target="_blank"
                   class="slider-item pull-left"><img data-v-5aa3520a=""
                                                      :src="banner3"
                                                      alt=""></a>
              </el-carousel-item>
              <el-carousel-item>
                <a data-v-5aa3520a=""
                   href="https://yingxiao.baidu.com/course/outside/detail?detailId=7000"
                   target="_blank" class="slider-item pull-left"><img
                    data-v-5aa3520a="" :src="banner4"
                    alt="">
                </a>
              </el-carousel-item>

            </el-carousel>
          </div>

        </div>
        <div class="bannerRight">
          <div class="login">
            <div class="loginContent">
              <div class="tabsBtn" v-if="isShow">
                <div v-if="!isUserLogin" class="corner-tag" @click="isUserLogin=true;form={}">
                  <img
                      src="data:image/svg+xml,%3Csvg width='30' height='30' viewBox='0 0 30 30' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M28.0377 24.2153L28.0537 26.7153L1.88309 26.883L1.86707 24.383L28.0377 24.2153ZM24.3751 3.125C26.4461 3.125 28.1251 4.80393 28.1251 6.875V18.125C28.1251 20.1961 26.4461 21.875 24.3751 21.875H5.62505C3.55398 21.875 1.87505 20.1961 1.87505 18.125V6.875C1.87505 4.80393 3.55398 3.125 5.62505 3.125H24.3751ZM24.3751 5.625H5.62505C4.98401 5.625 4.45567 6.10755 4.38346 6.72922L4.37505 6.875V18.125C4.37505 18.766 4.8576 19.2944 5.47927 19.3666L5.62505 19.375H24.3751C25.0161 19.375 25.5444 18.8924 25.6166 18.2708L25.6251 18.125V6.875C25.6251 6.23396 25.1425 5.70562 24.5208 5.63341L24.3751 5.625Z' fill='white'/%3E%3C/svg%3E%0A">

                </div>
                <div v-else class="corner-tag" @click="isUserLogin=false;form={}">
                  <img
                      src="data:image/svg+xml,%3Csvg width='30' height='30' viewBox='0 0 30 30' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M17.2193 3H24.1217C25.4352 3 26.4999 4.06474 26.4999 5.37817V12.2807C26.4999 13.5941 25.4352 14.6588 24.1217 14.6588H17.2193C15.9058 14.6588 14.8411 13.5941 14.8411 12.2807V5.37817C14.8411 4.06474 15.9058 3 17.2193 3ZM24.1216 5.37816H17.2191V12.2807H24.1216V5.37816ZM3.87817 16.3409H10.7807C12.0941 16.3409 13.1588 17.4057 13.1588 18.7191V25.6216C13.1588 26.935 12.0941 27.9997 10.7807 27.9997H3.87817C2.56474 27.9997 1.5 26.935 1.5 25.6216V18.7191C1.5 17.4057 2.56474 16.3409 3.87817 16.3409ZM10.7812 18.7192H3.8787V25.6216H10.7812V18.7192ZM20.0104 25.6506C19.7343 25.6506 19.5104 25.8745 19.5104 26.1506V27.4708C19.5104 27.7469 19.7343 27.9708 20.0104 27.9708H21.3306C21.6067 27.9708 21.8306 27.7469 21.8306 27.4708V26.1506C21.8306 25.8745 21.6067 25.6506 21.3306 25.6506H20.0104ZM3.87817 3H10.7807C12.0941 3 13.1588 4.06474 13.1588 5.37817V12.2807C13.1588 13.5941 12.0941 14.6588 10.7807 14.6588H3.87817C2.56474 14.6588 1.5 13.5941 1.5 12.2807V5.37817C1.5 4.06474 2.56474 3 3.87817 3ZM10.7812 5.37816H3.8787V12.2807H10.7812V5.37816ZM19.5098 8.16931C19.5098 7.89316 19.7337 7.66931 20.0098 7.66931H21.33C21.6061 7.66931 21.83 7.89316 21.83 8.16931V9.48947C21.83 9.76561 21.6061 9.98947 21.33 9.98947H20.0098C19.7337 9.98947 19.5098 9.76561 19.5098 9.48947V8.16931ZM6.66899 7.66931C6.39285 7.66931 6.16899 7.89317 6.16899 8.16931V9.48947C6.16899 9.76562 6.39285 9.98947 6.66899 9.98947H7.98916C8.2653 9.98947 8.48916 9.76562 8.48916 9.48947V8.16931C8.48916 7.89317 8.2653 7.66931 7.98916 7.66931H6.66899ZM6.66872 21.0103C6.39257 21.0103 6.16872 21.2341 6.16872 21.5103V22.8304C6.16872 23.1066 6.39257 23.3304 6.66872 23.3304H7.98888C8.26502 23.3304 8.48888 23.1066 8.48888 22.8304V21.5103C8.48888 21.2341 8.26502 21.0103 7.98888 21.0103H6.66872ZM21.8515 17.3913C21.7828 16.7999 21.2802 16.3409 20.6704 16.3409H16.0301L15.8914 16.3489C15.3 16.4176 14.841 16.9202 14.841 17.53V26.8107L14.849 26.9493C14.9177 27.5407 15.4203 27.9997 16.0301 27.9997L16.1687 27.9917C16.7601 27.923 17.2191 27.4205 17.2191 26.8107L17.2185 18.7185H19.4802L19.4813 22.1703L19.4893 22.309C19.558 22.9004 20.0606 23.3594 20.6704 23.3594H25.3107L25.4494 23.3514C26.0408 23.2827 26.4998 22.7801 26.4998 22.1703V17.53L26.4918 17.3913C26.4231 16.7999 25.9205 16.3409 25.3107 16.3409L25.172 16.3489C24.5807 16.4176 24.1216 16.9202 24.1216 17.53L24.1212 20.9801H21.8583L21.8595 17.53L21.8515 17.3913ZM24.1504 26.1506C24.1504 25.8745 24.3742 25.6506 24.6504 25.6506H25.9706C26.2467 25.6506 26.4706 25.8745 26.4706 26.1506V27.4708C26.4706 27.7469 26.2467 27.9708 25.9706 27.9708H24.6504C24.3742 27.9708 24.1504 27.7469 24.1504 27.4708V26.1506Z' fill='white'/%3E%3C/svg%3E%0A">

                </div>

              </div>
              <div class="loginHeader">
                <el-tabs v-model="activeName1" @tab-click="changeTabs" style="z-index: 3">
                  <el-tab-pane v-if="isUserLogin" label="百度营销账号" name="百度营销账号">

                    <el-input v-model="form.username" placeholder="请输入登录名"></el-input>
                    <el-input v-model="form.password" type="password" style="z-index: 33"
                              placeholder="请输入密码"></el-input>
                    <span>
                <div class="dialog-footers">
                    <el-button class="loginBtn" :loading="isLoading" @click="_handleLogin"> 登录</el-button>

                <div class="other" id="v3-links"><div class="fl"><a class="uc-faq"
                                                                    href="http://aq.baidu.com/new/#/school"
                                                                    target="_blank">常见问题</a><a class="uc-join"
                                                                                               href="http://mishu.baidu.com/home.html?from=7&amp;refer=7_1#/home/"
                                                                                               target="_blank">加入百度营销</a></div><div
                    class="fr"><a class="uc-register"
                                  href="#" @click="goToPage">注册</a><a
                    href="http://aq.baidu.com/new/#/findpwd" target="_blank">忘记密码</a></div></div>
                </div>
            </span>
                  </el-tab-pane>
                  <el-tab-pane v-else label="百度营销账号" name="百度营销账号">
                    <div class="uc-code-content-item uc-code-item-scan" style=""><img
                        class="uc-qrcode"
                        src="https://cas.baidu.com/?action=qrcode&amp;appid=3&amp;t=1706803578999"
                        alt="二维码" min-width="120" height="120">
                      <p class="uc-code-scan-remark"><span>打开</span><a
                          class="uc-code-link-app"
                          href="https://mobile2.baidu.com/index.html" target="_blank">百度营销App</a><span>扫码登录</span>
                      </p></div>
                    <span>
                <div class="dialog-footers">

                <div class="other" id="v3-links"><div class="fl"><a class="uc-faq"
                                                                    href="http://aq.baidu.com/new/#/school"
                                                                    target="_blank">常见问题</a><a class="uc-join"
                                                                                               href="http://mishu.baidu.com/home.html?from=7&amp;refer=7_1#/home/"
                                                                                               target="_blank">加入百度营销</a></div><div
                    class="fr"><a class="uc-register"
                                  href="http://u.baidu.com/ucweb/?module=Reguser&amp;controller=reg&amp;action=index&amp;appid=3"
                                  target="_blank">注册</a><a
                    href="http://aq.baidu.com/new/#/findpwd" target="_blank">忘记密码</a></div></div>
                </div>
            </span>
                  </el-tab-pane>
                  <el-tab-pane v-if="!isPhoneLogin" label="百度账号" name="百度账号">

                    <el-input v-model="form.phone" placeholder="请输入手机号"></el-input>
                    <el-input v-model="form.password" type="password"
                              placeholder="请输入密码"></el-input>
                    <span>
                <div class="dialog-footers">
                    <el-button class="loginBtn" :loading="isLoading" @click="_handleLogin"> 登录</el-button>

                <div class="other" id="v3-links"><div
                    class="fr"><a @click="isPhoneLogin=true" style="cursor: pointer;" target="_blank">短信快捷登录</a><a
                    href="http://aq.baidu.com/new/#/findpwd" target="_blank">忘记密码</a></div></div>
                </div>
            </span>
                  </el-tab-pane>
                  <el-tab-pane v-else label="百度账号" name="百度账号">

                    <el-input v-model="form.phone" placeholder="请输入手机号"></el-input>
                    <div class="form_compact">
                      <el-row>
                        <el-col :span="15">
                          <el-input v-model="form.validCode" placeholder="输入验证码"
                                    :maxlength="6"></el-input>

                        </el-col>
                        <el-col :span="9">
                          <el-button style="margin-left: 5%" type="primary"
                                     :disabled="verificationCodeText !== '获取验证码'"
                                     @click="queryVerificationCode">
                            {{ verificationCodeText }}
                          </el-button>
                        </el-col>
                      </el-row>

                    </div>
                    <span>
                <div class="dialog-footers">
                    <el-button class="loginBtn" :loading="isLoading" @click="_handleLogin"> 登录</el-button>
                <div class="other" id="v3-links"><div
                    class="fr"><a @click="isPhoneLogin=false" style="cursor: pointer;">用户名密码登录</a></div></div>
                </div>
            </span>
                  </el-tab-pane>
                </el-tabs>
              </div>
            </div>
          </div>
        </div>

      </el-main>
      <!--热门专题-->
      <el-main class="topic">
        <h1 class="topic-head">
          热门专题
          <a href="https://yingxiao.baidu.com/edu" target="_blank" class="more pull-right">
            查看更多
            <i class="arrow"></i></a></h1>
        <div class="topic-body clearfix">
          <div class="topic-item clearfix pull-left">
            <a href="http://yingxiao.baidu.com/new/topic/607/index?ly=3wxzt4" target="_blank">
              <img src="https://bdyingxiaocms.cdn.bcebos.com/2019-06-12/5d010bbe498f0.jpg" alt="百度商业产品图谱">
              <div class="active">
                <div class="active-content">GO<i data-v-85e9a9d4="" class="go-arrow"></i></div>
              </div>
            </a></div>
          <div class="topic-item clearfix pull-left">
            <a href="https://yingxiao.baidu.com/case?ly=3wxzt" target="_blank">
              <img src="https://bdyingxiaocms.cdn.bcebos.com/2019-06-12/5d010b956e346.jpg"
                   alt="案例库百度商业产品">
              <div class="active">
                <div class="active-content">GO<i data-v-85e9a9d4="" class="go-arrow"></i></div>
              </div>
            </a></div>
          <div class="topic-item clearfix pull-left"><a
              href="https://yingxiao.baidu.com/course/outside/detail?contentType=3&amp;detailId=5081"
              target="_blank"><img src="https://bdyingxiaocms.cdn.bcebos.com/20220613/62a713b94fbff.jpg"
                                   alt="商业产品系列课">
            <div class="active">
              <div class="active-content">GO<i class="go-arrow"></i></div>
            </div>
          </a></div>
        </div>
      </el-main>
      <!--营销-->
      <div data-v-1cde074a="" class="brand-marketing">
        <div data-v-1cde074a="" class="category pull-left category0"><h2 data-v-1cde074a=""
                                                                         class="category-title">效果推广</h2> <img
            data-v-1cde074a=""
            src="https://uc-mono.cdn.bcebos.com/pub/www2-login/img/extend/extend_logo.jpg@h_240,q_80"
            alt="效果推广" class="category-banner blur"> <a data-v-1cde074a=""
                                                        href="https://yingxiao.baidu.com/course/outside/detail?from=yingxiaoSearch&amp;detailId=5018"
                                                        target="_blank" class="info pull-left center0"><img
            data-v-1cde074a=""
            src="https://uc-mono.cdn.bcebos.com/pub/www2-login/img/extend/sstg.png@h_28,q_80" alt=""
            class="subItem-icon"> <span data-v-1cde074a="" class="subItem-name">搜索推广</span></a><a
            data-v-1cde074a=""
            href="https://yingxiao.baidu.com/course/outside/detail?from=yingxiaoSearch&amp;detailId=5022"
            target="_blank" class="info pull-left center0"><img data-v-1cde074a=""
                                                                src="https://uc-mono.cdn.bcebos.com/pub/www2-login/img/extend/ysjj.png@h_28,q_80"
                                                                alt="" class="subItem-icon"> <span
            data-v-1cde074a="" class="subItem-name">信息流推广</span></a></div>
        <div data-v-1cde074a="" class="category pull-left category1"><h2 data-v-1cde074a=""
                                                                         class="category-title">品牌展示</h2> <img
            data-v-1cde074a=""
            src="https://uc-mono.cdn.bcebos.com/pub/www2-login/img/show/show_logo.jpg@h_240,q_80" alt="品牌展示"
            class="category-banner blur"> <a data-v-1cde074a=""
                                             href="https://yingxiao.baidu.com/course/outside/detail?from=yingxiaoSearch&amp;detailId=5441"
                                             target="_blank" class="info pull-left center1"><img
            data-v-1cde074a="" src="https://uc-mono.cdn.bcebos.com/pub/www2-login/img/show/hy.png@h_28,q_80"
            alt="" class="subItem-icon"> <span data-v-1cde074a="" class="subItem-name">品牌全景</span></a><a
            data-v-1cde074a=""
            href="https://yingxiao.baidu.com/course/outside/detail?from=yingxiaoSearch&amp;detailId=5021"
            target="_blank" class="info pull-left center1"><img data-v-1cde074a=""
                                                                src="https://uc-mono.cdn.bcebos.com/pub/www2-login/img/show/ppzq.png@h_28,q_80"
                                                                alt="" class="subItem-icon"> <span
            data-v-1cde074a="" class="subItem-name">品牌专区</span></a><a data-v-1cde074a=""
                                                                      href="https://yingxiao.baidu.com/course/outside/detail?from=yingxiaoSearch&amp;detailId=1107"
                                                                      target="_blank"
                                                                      class="info pull-left center1"><img
            data-v-1cde074a="" src="https://uc-mono.cdn.bcebos.com/pub/www2-login/img/show/jp.png@h_28,q_80"
            alt="" class="subItem-icon"> <span data-v-1cde074a="" class="subItem-name">聚屏</span></a></div>
        <div data-v-1cde074a="" class="category pull-left category2"><h2 data-v-1cde074a=""
                                                                         class="category-title">智能解决方案</h2> <img
            data-v-1cde074a=""
            src="https://uc-mono.cdn.bcebos.com/pub/www2-login/img/project/project_logo.jpg@h_240,q_80"
            alt="智能解决方案" class="category-banner blur"> <a data-v-1cde074a=""
                                                          href="https://yingxiao.baidu.com/course/outside/detail?from=yingxiaoSearch&amp;detailId=1784"
                                                          target="_blank"
                                                          class="info pull-left center2"><img
            data-v-1cde074a=""
            src="https://uc-mono.cdn.bcebos.com/pub/www2-login/img/project/adver.png@h_28,q_80" alt=""
            class="subItem-icon"> <span data-v-1cde074a="" class="subItem-name">应用推广</span></a><a
            data-v-1cde074a=""
            href="https://yingxiao.baidu.com/course/outside/detail?contentType=3&amp;detailId=5137"
            target="_blank" class="info pull-left center2"><img data-v-1cde074a=""
                                                                src="https://uc-mono.cdn.bcebos.com/pub/www2-login/img/project/shop.png@h_28,q_80"
                                                                alt="" class="subItem-icon"> <span
            data-v-1cde074a="" class="subItem-name">门店推广</span></a><a data-v-1cde074a=""
                                                                      href="https://yingxiao.baidu.com/course/outside/detail?contentType=3&amp;detailId=5555"
                                                                      target="_blank"
                                                                      class="info pull-left center2"><img
            data-v-1cde074a=""
            src="https://uc-mono.cdn.bcebos.com/pub/www2-login/img/project/sjh.png@h_28,q_80" alt=""
            class="subItem-icon"> <span data-v-1cde074a="" class="subItem-name">电商店铺推广</span></a><a
            data-v-1cde074a=""
            href="https://yingxiao.baidu.com/course/outside/detail?from=yingxiaoSearch&amp;detailId=1255"
            target="_blank" class="info pull-left center2"><img data-v-1cde074a=""
                                                                src="https://uc-mono.cdn.bcebos.com/pub/www2-login/img/project/list.png@h_28,q_80"
                                                                alt="" class="subItem-icon"> <span
            data-v-1cde074a="" class="subItem-name">商品目录推广</span></a><a data-v-1cde074a=""
                                                                        href="http://yingxiao.baidu.com/new/home/product/product?id=225&amp;ly=nav_list"
                                                                        target="_blank"
                                                                        class="info pull-left center2"><img
            data-v-1cde074a=""
            src="https://uc-mono.cdn.bcebos.com/pub/www2-login/img/project/plan.png@h_28,q_80" alt=""
            class="subItem-icon"> <span data-v-1cde074a="" class="subItem-name">风云计划</span></a><a
            data-v-1cde074a="" href="http://yingxiao.baidu.com/new/home/product/product/id/150?ly=3wtuwen"
            target="_blank" class="info pull-left center2"><img data-v-1cde074a=""
                                                                src="https://uc-mono.cdn.bcebos.com/pub/www2-login/img/project/xcx.png@h_28,q_80"
                                                                alt="" class="subItem-icon"> <span
            data-v-1cde074a="" class="subItem-name">智能小程序</span></a></div>
      </div>

      <!--            帮助中心-->
      <div data-v-105aaa8b="" class="help-center"><h2 data-v-105aaa8b="" class="help-center-head">帮助中心</h2>
        <div data-v-105aaa8b="" class="help-center-body">
          <div data-v-105aaa8b="" class="menu pull-left clearfix"><h3 data-v-105aaa8b=""
                                                                      class="menu-item-title">百度营销概览</h3>
            <ul data-v-105aaa8b="">
              <li data-v-105aaa8b="" class="menu-list"><a data-v-105aaa8b=""
                                                          href="https://yingxiao.baidu.com/home/help/details?id=54913"
                                                          target="_blank" class="menu-name">图解百度商业全景</a>
              </li>
              <li data-v-105aaa8b="" class="menu-list"><a data-v-105aaa8b=""
                                                          href="https://yingxiao.baidu.com/home/help/details?id=55912"
                                                          target="_blank" class="menu-name">了解营销资源</a>
              </li>
            </ul>
          </div>
          <div data-v-105aaa8b="" class="menu pull-left clearfix"><h3 data-v-105aaa8b=""
                                                                      class="menu-item-title">选择产品</h3>
            <ul data-v-105aaa8b="">
              <li data-v-105aaa8b="" class="menu-list"><a data-v-105aaa8b=""
                                                          href="https://yingxiao.baidu.com/home/help/index?channel_id=855"
                                                          target="_blank" class="menu-name">搜索推广</a></li>
              <li data-v-105aaa8b="" class="menu-list"><a data-v-105aaa8b=""
                                                          href="https://yingxiao.baidu.com/home/help/index?channel_id=856"
                                                          target="_blank" class="menu-name">信息流推广</a></li>
            </ul>
          </div>
          <div data-v-105aaa8b="" class="menu pull-left clearfix"><h3 data-v-105aaa8b=""
                                                                      class="menu-item-title">开通账户</h3>
            <ul data-v-105aaa8b="">
              <li data-v-105aaa8b="" class="menu-list"><a data-v-105aaa8b=""
                                                          href="https://yingxiao.baidu.com/home/help/details?id=599"
                                                          target="_blank" class="menu-name">如何注册搜索推广账号</a>
              </li>
              <li data-v-105aaa8b="" class="menu-list"><a data-v-105aaa8b=""
                                                          href="https://yingxiao.baidu.com/home/help/details?id=613"
                                                          target="_blank"
                                                          class="menu-name">注册账户有哪些要求和限制</a></li>
            </ul>
          </div>
          <div data-v-105aaa8b="" class="menu pull-left clearfix"><h3 data-v-105aaa8b=""
                                                                      class="menu-item-title">投放优化</h3>
            <ul data-v-105aaa8b="">
              <li data-v-105aaa8b="" class="menu-list"><a data-v-105aaa8b=""
                                                          href="https://yingxiao.baidu.com/home/help/details?id=55753"
                                                          target="_blank" class="menu-name">信息流推广创意优化</a>
              </li>
              <li data-v-105aaa8b="" class="menu-list"><a data-v-105aaa8b=""
                                                          href="https://yingxiao.baidu.com/home/help/details?id=56388"
                                                          target="_blank" class="menu-name">搜索推广优化中心</a>
              </li>
            </ul>
          </div>
          <div data-v-105aaa8b="" class="menu pull-left clearfix"><h3 data-v-105aaa8b=""
                                                                      class="menu-item-title">辅助工具</h3>
            <ul data-v-105aaa8b="">
              <li data-v-105aaa8b="" class="menu-list"><a data-v-105aaa8b=""
                                                          href="https://yingxiao.baidu.com/home/help/details?id=55965"
                                                          target="_blank" class="menu-name">百度统计新手入门</a>
              </li>
              <li data-v-105aaa8b="" class="menu-list"><a data-v-105aaa8b=""
                                                          href="https://yingxiao.baidu.com/home/help/details?id=56407"
                                                          target="_blank" class="menu-name">百度营销手机版</a>
              </li>
            </ul>
          </div>
          <div data-v-105aaa8b="" class="menu pull-left clearfix"><h3 data-v-105aaa8b=""
                                                                      class="menu-item-title">其它问题</h3>
            <ul data-v-105aaa8b="">
              <li data-v-105aaa8b="" class="menu-list"><a data-v-105aaa8b=""
                                                          href="https://yingxiao.baidu.com/home/help/details?id=56009"
                                                          target="_blank"
                                                          class="menu-name">搜索推广oCPC常见问题</a></li>
              <li data-v-105aaa8b="" class="menu-list"><a data-v-105aaa8b=""
                                                          href="https://yingxiao.baidu.com/home/help/index?channel_id=86"
                                                          target="_blank" class="menu-name">信息流推广热门问题</a>
              </li>
            </ul>
          </div>
        </div>
      </div>

      <!--        营销工具    -->
      <div data-v-7e38d63f="" class="product"><h2 data-v-7e38d63f="" class="product-head">营销工具</h2>
        <div data-v-7e38d63f="" class="product-body"><a data-v-7e38d63f=""
                                                        href="https://smartprogram.baidu.com/developer/index.html"
                                                        target="_blank" class="Category pull-left">
          <div data-v-7e38d63f="" class="animArea-xcx" style="display: inline-block;">
            <div data-v-7e38d63f="" class="icon xcx"></div>
            <br data-v-7e38d63f=""> <span data-v-7e38d63f="" class="title">智能小程序</span> <span
              data-v-7e38d63f="" class="description">消费者管理</span></div>
        </a><a data-v-7e38d63f="" href="https://cdp.baidu.com/static/main/dashboard" target="_blank"
               class="Category pull-left">
          <div data-v-7e38d63f="" class="animArea-gxp" style="display: inline-block;">
            <div data-v-7e38d63f="" class="icon gxp"></div>
            <br data-v-7e38d63f=""> <span data-v-7e38d63f="" class="title">观星盘</span> <span
              data-v-7e38d63f="" class="description">全链AI营销数据平台</span></div>
        </a><a data-v-7e38d63f="" href="https://wutong.baidu.com/platform/" target="_blank"
               class="Category pull-left">
          <div data-v-7e38d63f="" class="animArea-jmy" style="display: inline-block;">
            <div data-v-7e38d63f="" class="icon jmy"></div>
            <br data-v-7e38d63f=""> <span data-v-7e38d63f="" class="title">基木鱼</span> <span
              data-v-7e38d63f="" class="description">免费智能建站</span></div>
        </a><a data-v-7e38d63f="" href="https://aifanfan.baidu.com/" target="_blank" class="Category pull-left">
          <div data-v-7e38d63f="" class="animArea-app" style="display: inline-block;">
            <div data-v-7e38d63f="" class="icon app"></div>
            <br data-v-7e38d63f=""> <span data-v-7e38d63f="" class="title">爱番番</span> <span
              data-v-7e38d63f="" class="description">百度线索管家</span></div>
        </a><a data-v-7e38d63f="" href="http://mobile2.baidu.com/index.html" target="_blank"
               class="Category pull-left">
          <div data-v-7e38d63f="" class="animArea-tg" style="display: inline-block;">
            <div data-v-7e38d63f="" class="icon tg"></div>
            <br data-v-7e38d63f=""> <span data-v-7e38d63f="" class="title">百度营销APP</span> <span
              data-v-7e38d63f="" class="description">推广辅助工具</span></div>
        </a></div>
      </div>

      <!--            底部-->
      <div data-v-6d60a1c4="" class="footer">
        <div data-v-6d60a1c4="" class="footer-nav"><span data-v-6d60a1c4="" class="footer-nav-ctn"><a
            data-v-6d60a1c4="" href="http://tuiguang.baidu.com" target="_blank">广告投放平台</a></span> <span
            data-v-6d60a1c4="" class="footer-nav-ctn"><a data-v-6d60a1c4=""
                                                         href="https://b2bwork.baidu.com/shop/select"
                                                         target="_blank">爱采购</a></span> <span
            data-v-6d60a1c4="" class="footer-nav-ctn"><a data-v-6d60a1c4=""
                                                         href="https://aifanfan.baidu.com"
                                                         target="_blank">爱番番</a></span>
          <span data-v-6d60a1c4="" class="footer-nav-ctn"><a data-v-6d60a1c4=""
                                                             href="http://tongji.baidu.com/"
                                                             target="_blank">百度统计</a></span>
          <span data-v-6d60a1c4="" class="footer-nav-ctn"><a data-v-6d60a1c4="" href="http://fuwu.baidu.com"
                                                             target="_blank">营销服务市场</a></span> <span
              data-v-6d60a1c4="" class="footer-nav-ctn"><a data-v-6d60a1c4=""
                                                           href="http://yingxiao.baidu.com"
                                                           target="_blank">百度营销中心</a></span></div>
        <div data-v-6d60a1c4="" class="footer-statement">
          ©2024 Baidu
          <a data-v-6d60a1c4="" href="https://www.baidu.com/duty" target="_blank">使用百度前必读</a>
          京公安网备 11000002000001号 互联网信息服务许可
          我已阅读并接受<a data-v-6d60a1c4="" href="http://e.baidu.com/accept.html" target="_blank">百度推广服务合同</a>
          欢迎访问<a data-v-6d60a1c4="" href="http://rules.baidu.com/userpolicy" target="_blank">百度推广政策中心</a>
        </div>
      </div>

      <div data-v-5002dd5a="" class="right-bar">
        <div data-v-5002dd5a="" class="category" @mouseenter="isShowGZ = false"
             @mouseleave="isShowGZ = true">
          <img data-v-5002dd5a="" v-if="isShowGZ"
               src="https://uc-mono.cdn.bcebos.com/pub/www2-login/img/rightbar/follow.png@w_18|h_18"
               alt="关注" class="icon">
          <div data-v-5002dd5a="" v-else>
            <div data-v-5002dd5a="" class="reminder follow">关注</div>
            <span data-v-5002dd5a="" class=""></span>
            <div data-v-afd6430c="" data-v-5002dd5a="" class="content follow-content">
              <div data-v-afd6430c="" class="content-box content-box1">
                <div data-v-afd6430c="" @mouseenter="showFollowDetailTable1 = true" @mouseleave="showFollowDetailTable1 = false" class="table1 content-head pull-left follow-head"><img
                    data-v-afd6430c=""
                    src="https://uc-mono.cdn.bcebos.com/pub/www2-login/img/center.png@q_80"
                    alt="营销中心" class="follow-icon">
                  <h2 data-v-afd6430c="" class="follow-title">营销中心</h2></div>
                <div data-v-afd6430c="" @mouseenter="showFollowDetailTable2 = true" @mouseleave="showFollowDetailTable2 = false" class="table2 content-head pull-left follow-head"><img
                    data-v-afd6430c=""
                    src="https://uc-mono.cdn.bcebos.com/pub/www2-login/img/weixin.png@q_80" alt="微信"
                    class="follow-icon">
                  <h2 data-v-afd6430c="" class="follow-title">微信</h2></div>

              </div>
              <div  v-show="showFollowDetailTable1||showFollowDetailTable2" data-v-afd6430c="" class="follow-detailTable follow-detailTable1">
                <div class="floowTable floowTable1" >
                  <img data-v-5aa3520a="" :src="yinCode" v-show="showFollowDetailTable1"
                       alt="">
                  <img data-v-5aa3520a="" :src="weixinCode" v-show="showFollowDetailTable2"
                       alt="">
                </div>

              </div>

            </div>
          </div>
        </div>
        <div data-v-5002dd5a="" class="category" @mouseenter="isShowPhone = false"
             @mouseleave="isShowPhone = true"><img data-v-5002dd5a="" v-if="isShowPhone"
                                                   src="https://uc-mono.cdn.bcebos.com/pub/www2-login/img/rightbar/phone.png@w_18|h_18"
                                                   alt="电话" class="icon">
          <div data-v-5002dd5a="" v-else>
            <div data-v-5002dd5a="" class="reminder follow">电话</div>
            <span data-v-5002dd5a="" class=""></span>
            <div data-v-47200396="" data-v-5002dd5a="" class="content">
              <div data-v-47200396="" class="content-box">
                <div data-v-47200396="" class="phone-item"><h3 data-v-47200396="" class="phone-title">
                  售前咨询电话：</h3>
                  <div data-v-47200396="" class="phone-num">400 800 8888</div>
                </div>
                <div data-v-47200396="" class="phone-item"><h3 data-v-47200396="" class="phone-title">
                  售后咨询电话：</h3>
                  <div data-v-47200396="" class="phone-num">400 921 9999</div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div data-v-5002dd5a="" class="category" @mouseenter="isShowTop = false"
             @mouseleave="isShowTop = true"><img data-v-5002dd5a="" v-if="isShowTop"
                                                 src="https://uc-mono.cdn.bcebos.com/pub/www2-login/img/rightbar/arrow.png@w_18|h_18"
                                                 alt="顶部" class="icon">
          <div data-v-5002dd5a="" v-else @click="scrollToTop">
            <div data-v-5002dd5a="" class="reminder follow">顶部</div> <!----> <!----></div>
        </div>
      </div>
    </el-container>

  </div>
</template>

<script>
import {useLogin} from '@/services/model/user'
import {Message} from "element-ui";
import {setLocalStorageItem, removeLocalStorageItem} from '@/utils/storage-helper'
import banner2 from './banner2.jpg'
import banner3 from './banner3.jpg'
import banner4 from './banner4.jpg'
import yinCode from './yinCode.png'
import weixinCode from './weixinCode.png'
export default {
  data() {
    return {
      showFollowDetailTable1: false,
      showFollowDetailTable2: false,
      isShowGZ: true,
      isShowPhone: true,
      isShowTop: true,
      weixinCode:weixinCode,
      yinCode: yinCode,
      banner2: banner2,
      banner3: banner3,
      banner4: banner4,
      verificationCodeText: '获取验证码',
      isLoading: false,
      isPhoneLogin: false,
      isUserLogin: true,
      isShow: true,
      forgetForm: {unitType: 1},//忘记密码
      activeName1: '百度营销账号',
      // 分页参数
      form: {
        page: 1,
        pageSize: 20,

      }
    }

  },
  methods: {
    scrollToTop() {
      window.scrollTo({
        top: 0,
        behavior: 'smooth' // 为了平滑滚动
      });

    },
    goToPage() {
      const newWindow = window.open('', '_blank');

      if (newWindow) {
        // 在新窗口中使用 this.$router.push 来跳转到指定路由
        newWindow.location.href = this.$router.resolve('/register').href;
      }
    },
    changeTabs() {
      console.log(11122)
      this.form = {}
      this.activeName1 == '百度营销账号' ? this.isShow = true : this.isShow = false
    },
    // 获取验证码
    async queryVerificationCode() {
      this.verificationCodeText = 60

      // 倒计时
      let timer = () => {
        setTimeout(() => {
          this.verificationCodeText--
          if (this.verificationCodeText > 0) timer()
          else this.verificationCodeText = '获取验证码'
        }, 1000)
      }
      timer()
    },
    // 处理登录
    async _handleLogin() {
      //手机登录处理

      try {
        let data = await useLogin({username: this.form.username, password: this.form.password})
        this.isLoading = true
        setLocalStorageItem('USER_TOKEN', data.token, 1)
        setLocalStorageItem('userInfo', data, 1)
        setLocalStorageItem('userId', data.id, 1)
        this.$router.push('/home')
      } catch (error) {
        this.isLoading = false

      } finally {
        this.isLoading = false
        return
      }

    },
  }
  // Add data, computed properties, methods, etc. here if needed
}
</script>

<style scoped lang="less">
.loginBg {
  height: 100%;
  box-sizing: border-box;
  margin: 0 auto;
  position: relative;
  background: rgb(242, 244, 248);
  width: 1180px;

  .el-header {
    height: 70px !important;
    border-bottom: 1px solid #dfe0e4;
    position: relative;
    box-sizing: border-box;

    .navLeft {
      position: relative;
      top: 20px;

      h1 {
        background: url() no-repeat;
        background-size: cover;
        text-indent: -9999px;
        width: 100px;
        height: 30px;
        margin-top: 5px;

      }
    }

    .navRight {
      border-bottom: 2px solid transparent;
      color: #666f8d;
      cursor: pointer;
      position: relative;
      color: #333;
      font-size: 16px;
      font-weight: 400;
      padding-top: 35px;
      padding-bottom: 16px;
      box-sizing: border-box;
    }
  }

  .el-main {
    width: 100%;
    padding-left: 0;
    padding-right: 0;
    box-sizing: border-box;
    overflow: hidden;

    .bannerBox {
    }

    .bannerLeft {

      .el-carousel__item {
        width: 100%;
        height: 100%;

        img {
          width: 100%;
          height: 100%;
        }
      }
    }

    .bannerRight {
      padding: 0;
      height: 100%;
      width: 348px;
      position: relative;
      background-color: #fff;
      -webkit-border-radius: 10px;
      -moz-border-radius: 10px;
      border-radius: 10px;

      .login {
        width: 100%;
        height: 100%;
        background: white;
        border-radius: 15px;
        position: relative;

      }

      .tabsBtn {
        position: absolute;
        top: 00px;
        right: 0;
        width: 72px;
        height: 72px;
        z-index: 99;

      }

      .corner-tag {
        position: relative;
        width: 100%;
        height: 100%;

        background-color: transparent;
        border-top-right-radius: 10px;
        color: white;
        padding: 5px 10px;
        z-index: 1;
        background: #0052cc;

        img {
          position: absolute;
          top: 15%;
          left: 40%;
          width: 28px;
          height: 28px;
          cursor: pointer;
        }

        /*transform: translate(50%, -50%) rotate(45deg);*/
        /*transform-origin: bottom right;*/
        /* 设置其他样式来匹配上传图片中的角标样式 */
      }

      .corner-tag::before {
        content: "";
        width: 0;
        height: 0;
        top: 0;
        border-left: 53px solid transparent; /* 左边透明 */
        border-right: 053px solid transparent; /* 右边透明 */
        border-bottom: 54px solid white; /* 底部颜色，可以根据需要更改 */
        position: absolute;
        left: 0;
        transform: translate(-35%, 50%) rotate(-135deg);
        z-index: -11;


        /* 设置其他样式来匹配上传图片中的角标样式 */
      }

      .loginContent {
        width: 100%;
        height: 400px;
        border-radius: 10px;
        box-sizing: border-box;
        padding: 0 10%;

        /deep/ .el-tabs__nav {
          width: 100%;
          height: 50px;
        }

        /deep/ .el-tabs__item {
          width: 35%;
          text-align: center;
          font-size: 16px;
          height: 40px;
          line-height: 40px;
          margin-top: 10px;
        }

        /deep/ .el-tabs__item:hover {
          color: #282c33;
        }

        /deep/ .el-tabs__item.is-active {
          font-weight: 600;
          font-size: 18px;
          color: #282c33;
        }

        /deep/ .el-tabs__nav-wrap::after {
          background: transparent;
        }

        /deep/ .el-tabs__bar {
        }

        /deep/ .el-select {
          margin-top: 10px;
          width: 100% !important;
        }

        /deep/ .el-tabs__active-bar {
          height: 6px;
          border-radius: 50px;
          width: 30px !important;
          top: 40px;
          margin-left: 10%;
          background: #0052cc;

        }

        /deep/ .el-input__inner {
          width: 100%;
          line-height: 50px !important;
          overflow: hidden;
        }

        /deep/ .el-input {
          margin-top: 10px;

          width: 100% !important;
        }

      }

      .dialog-footers {
        margin-top: 10%;

        /deep/ .el-button {
          width: 100%;
          height: 44px;
          font-size: 16px;
          border-radius: 8px;
          color: #fff;
          background-color: #0052cc;
          border: 1px solid transparent;
          box-shadow: 0 4px 15px rgba(0, 102, 255, 0.2);
          cursor: pointer;
          margin-bottom: 24px;

        }

        .other {
          display: flex;
          justify-content: center;

          a {
            position: relative;
            display: inline-block;
            height: 16px;
            line-height: 16px;
            font-size: 12px;
            color: #0052cc;
            padding: 0 6px 0 8px;
            outline: 0;
          }

          a:not(.uc-code-btn-change)::before {
            content: "|";
            position: absolute;
            right: 0;
            top: 50%;
            width: 1px;
            font-size: 16px;
            transform: translateY(-50%) scale(.5);
            color: #d3d9e6;
          }
        }
      }
    }
  }

  .topic {
    overflow: hidden;
    padding: 30px 0 16px;
    float: left;
    background: #fff;
    box-sizing: border-box;
    margin-bottom: 20px;

    .topic-head {
      font-size: 16px;
      font-weight: 600;
      margin-bottom: 25px;
      padding: 0 39px 0 30px;
      font-family: PingFangSC-Regular;
      display: block;
      display: flex;
      justify-content: space-between;

      .more {
        position: relative;
        margin-top: 2px;
        color: #999;
        font-size: 12px;
        font-weight: 400;
        font-family: PingFangSC-Regular;
        text-decoration: none;
      }

      .arrow {
        content: "";
        position: absolute;
        right: -8px;
        top: 5px;
        width: 6px;
        height: 6px;
        border-top: 1px solid #999;
        border-right: 1px solid #999;
        transform: rotate(45deg);
        webkit-transform: rotate(45deg)
      }

      .pull-right {
        float: right;
      }
    }

    .topic-body {
      display: flex;
      width: 100%;
      justify-content: space-between;

      .topic-item {
        width: 33%;
        height: 120px;
        position: relative;
        overflow: hidden;
        margin-bottom: 8px;

        a {
          width: 100%;

          img {
            width: 100%;
          }

          .active {
            position: absolute;
            width: 54px;
            height: 24px;
            background: #fff;
            border: 1px solid #999;
            z-index: 1;
            top: 74px;
            left: 30px;
            overflow: hidden;

            .active-content {
              width: 100%;
              height: 100%;
              position: absolute;
              line-height: 25px;
              font-size: 12px;
              color: #333;
              padding-left: 11px;
              box-sizing: border-box;
              transition: all .2s;

              .go-arrow {

                width: 8px;
                height: 8px;
                position: absolute;
                top: 8px;
                right: 6px;
                //background: url() no-repeat;
                background: url() no-repeat;
                background-size: 50%;

              }
            }
          }

          .active:hover {
            background: #333333;
            color: white;

            .active-content {
              color: white;

              .go-arrow {

                width: 8px;
                height: 8px;
                position: absolute;
                top: 8px;
                right: 6px;
                background: url() no-repeat;
                background-size: 50%;

              }
            }

          }
        }
      }

    }
  }

  .brand-marketing {
    font-family: PingFangSC-Regular, Microsoft Yahei, Avenir, Helvetica, Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
    color: #333;
    font-size: 14px;
    width: 100%;
    height: 240px;
    background: #fff;
    overflow: hidden;
    margin-bottom: 20px;

    .category:hover {
      .blur {
        transition: all .5s ease;
        transform: translateY(100%);

      }

    }

    .category {
      -webkit-font-smoothing: antialiased;
      color: #333;
      font-size: 14px;
      width: 33.3%;
      height: 100%;
      float: left;
      position: relative;

      .category-title {
        -webkit-font-smoothing: antialiased;
        color: #333;
        margin: 0;
        font-size: 16px;
        font-weight: 600;
        font-family: PingFangSC-Regular;
        padding: 30px 0 0 30px;
      }

      .category-banner {
        width: 100%;
        height: 240px;
        position: absolute;
        top: 0;
        left: 0;
        z-index: 1;
      }

      .blur {
        transition: all .5s ease;
        transform: translateY(0);

      }

      .focus {
        transition: all .5s ease;
        transform: translateY(100%);

      }

      .info {
        font-family: PingFangSC-Regular, Microsoft Yahei, Avenir, Helvetica, Arial, sans-serif;
        -webkit-font-smoothing: antialiased;
        font-size: 14px;
        width: 33%;
        float: left;
        overflow: hidden;
        text-align: center;
        margin-top: 17px;
        padding: 5px 0;
        text-decoration: none;
      }

      .subItem-name {
        font-family: PingFangSC-Regular, Microsoft Yahei, Avenir, Helvetica, Arial, sans-serif;
        -webkit-font-smoothing: antialiased;
        text-align: center;
        margin: 0 auto;
        display: block;
        cursor: pointer;
        color: #333;
        font-size: 12px;
      }

      .subItem-name:hover {
        color: #3998FC
      }
    }

  }

  .help-center {
    font-family: PingFangSC-Regular, Microsoft Yahei, Avenir, Helvetica, Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
    color: #333;
    font-size: 14px;
    width: 100%;
    margin: 20px 0;
    padding: 30px 0;
    background: #fff;
    overflow: hidden;
    box-sizing: border-box;

    .help-center-head {
      color: #333;
      margin: 0;
      font-size: 16px;
      font-weight: 600;
      padding-left: 30px;
    }

    .help-center-body {
      font-family: PingFangSC-Regular, Microsoft Yahei, Avenir, Helvetica, Arial, sans-serif;
      -webkit-font-smoothing: antialiased;
      color: #333;
      font-size: 14px;
      overflow: hidden;

      .menu {
        font-family: PingFangSC-Regular, Microsoft Yahei, Avenir, Helvetica, Arial, sans-serif;
        -webkit-font-smoothing: antialiased;
        color: #333;
        font-size: 14px;
        float: left;
        width: 16.5%;
        min-height: 100px;
        margin-top: 30px;
        padding-left: 30px;
        box-sizing: border-box;

        .menu-item-title {
          -webkit-font-smoothing: antialiased;
          color: #333;
          padding: 0;
          font-size: 14px;
          font-weight: 600;
          font-family: PingFangSC-Regular;
          margin-bottom: 9px;
        }

        ul {
          .menu-list {
            font-family: PingFangSC-Regular, Microsoft Yahei, Avenir, Helvetica, Arial, sans-serif;
            -webkit-font-smoothing: antialiased;
            color: #999;
            margin: 0;
            padding: 0;
            list-style: none;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            word-wrap: normal;
            line-height: 28px;
            font-size: 12px;

            .menu-name {
              font-family: PingFangSC-Regular, Microsoft Yahei, Avenir, Helvetica, Arial, sans-serif;
              -webkit-font-smoothing: antialiased;
              list-style: none;
              white-space: nowrap;
              word-wrap: normal;
              line-height: 28px;
              font-size: 12px;
              text-decoration: none;
            }

            .menu-name:hover {
              color: #262626;
            }
          }
        }
      }
    }
  }

  .product {
    font-family: PingFangSC-Regular, Microsoft Yahei, Avenir, Helvetica, Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
    color: #333;
    font-size: 14px;
    clear: both;
    background: #fff;
    overflow: hidden;

    .product-head {
      -webkit-font-smoothing: antialiased;
      color: #333;
      margin: 0;
      font-size: 16px;
      font-family: PingFangSC-Regular;
      margin-bottom: 27px;
      font-weight: 600;
      padding: 30px 0 0 30px;

    }

    .product-body {
      font-family: PingFangSC-Regular, Microsoft Yahei, Avenir, Helvetica, Arial, sans-serif;
      -webkit-font-smoothing: antialiased;
      color: #333;
      font-size: 14px;

      .pull-left {
        float: left;
      }

      .Category {
        width: 20%;
        margin-top: 0;
        margin-bottom: 27px;
        padding: 10px 0;
        text-align: center;
        text-decoration: none;
        background: #fff;
        overflow: hidden;

        .animArea-xcx {
          font-family: PingFangSC-Regular, Microsoft Yahei, Avenir, Helvetica, Arial, sans-serif;
          -webkit-font-smoothing: antialiased;
          font-size: 14px;
          text-align: center;
          display: inline-block;


        }

        .icon {
          width: 50px;
          height: 50px;
          margin-bottom: 15px;
          border: 0;
          background-size: 100% 100%;
          background-repeat: no-repeat;
          display: inline-block;
        }

        .xcx {
          background-position-x: -450px;
          background-position-y: -50px;
          background-size: 500px 100px;
          background-image: url(https://uc-mono.cdn.bcebos.com/pub/www2-login/imgs/animPic/anim_xcx.png@q_80);
        }

        .gxp {
          height: 50px;
          background-image: url(https://uc-mono.cdn.bcebos.com/pub/www2-login/imgs/animPic/gxp.png@q_80);

        }

        .jmy {
          height: 50px;
          background-image: url(https://uc-mono.cdn.bcebos.com/pub/www2-login/imgs/animPic/jmy.png@q_80);
        }

        .app {
          background-position-x: -450px;
          background-position-y: -50px;
          background-size: 500px 100px;
          background-image: url(https://uc-mono.cdn.bcebos.com/pub/www2-login/imgs/animPic/anim_app.png@q_80);
        }

        .tg {
          background-position-x: -450px;
          background-position-y: -50px;
          background-size: 500px 100px;
          background-image: url(https://uc-mono.cdn.bcebos.com/pub/www2-login/imgs/animPic/anim_tg.png@q_80);
        }

        .title {

          font-size: 14px;
          margin-bottom: 4px;
          display: block;
          color: #333;
        }

        .title:hover {
          color: #39A5FD
        }

        .description {
          font-size: 12px;
          color: #999;
        }
      }

    }
  }

  .footer {

    a:hover {
      text-decoration: underline;
      text-decoration-color: #000000; /* 下划线颜色 */
      text-decoration-style: solid; /* 下划线样式 */
      text-decoration-thickness: 1px; /* 下划线粗细 */
    }

    color: #333;
    display: flex;
    align-items: center;
    flex-direction: column;
    margin-top: 20px;
    padding: 15px 0 24px;
    font-size: 14px;

    .footer-nav {
      color: #333;
      font-size: 14px;
      display: flex;
      margin-bottom: 20px;

      .footer-nav-ctn {
        display: inline-block;
        height: 14px;
        line-height: 14px;
        padding: 0 20px;
        border-right: 1px solid #ccc;

        a {
          outline: none;
          color: #666;
          text-decoration: none;
        }

        a:hover {
          text-decoration: underline;
          text-decoration-color: #000000; /* 下划线颜色 */
          text-decoration-style: solid; /* 下划线样式 */
          text-decoration-thickness: 1px; /* 下划线粗细 */
        }
      }
    }

    .footer-statement {
      font-family: PingFang-SC-Regular, Microsoft YaHei, Helvetica, Sans-serif;
      font-size: 14px;
      color: #999;

      a {
        color: #999;
      }

      a:hover {
        text-decoration-color: #999; /* 下划线颜色 */
      }
    }
  }

  .right-bar {
    width: 50px;
    min-height: 200px;
    position: fixed;
    left: 50%;
    bottom: 21px;
    margin-left: 596px;
    z-index: 2;

    .category {
      width: 35px;
      height: 35px;
      margin-bottom: 2px;
      position: relative;
      background: #fff;

      img {
        width: 18px;
        height: 18px;
        margin: 8px 0 0 8px;
        position: absolute;
      }

      .reminder {
        font-size: 12px;
        color: #333;
        text-align: center;
        line-height: 35px;
        cursor: default;
      }

      .content {
        width: 260px;
        position: absolute;
        padding-right: 10px;
        left: -256px;
        top: -45px;

        .content-box1 {
          display: flex;
          align-items: center;
          justify-content: space-between;
          height:75px;
          background: magenta;
        }

        .follow-detailTable {
          display: block;
          width: 100%;
          height: 180px;
          background: white;
          box-sizing: border-box;
          padding: 0px 30px 0;
          overflow: hidden;
          .floowTable {
            width: 100%;
            height: 100%;
            display: block;
            border-top: 1px solid #bcbec2;
            img {
              display: block;
              width: 200px;
              height: 160px;
            }
          }
        }

        .content-box {
          padding: 10px 30px 0;
          background: #fff;
          overflow: hidden;
          box-shadow: 0 1px 4px 0 rgba(0, 0, 0, .12), 0 0 6px 0 rgba(0, 0, 0, .04);

          .phone-item {
            display: block;
            unicode-bidi: isolate;
            width: 100%;
          }

          .phone-title {
            font-size: 12px;
            color: #999;
            font-weight: 400;
            margin-bottom: 3px;
          }

          .phone-num {
            font-size: 22px;
            color: #333;
            margin-bottom: 10px;
            font-family: PingFangSC-Regular;
          }

          .content-head {
            box-sizing: border-box;
            cursor: pointer;
            background: white;
            width: 49%;
            height: 100%;
            margin-top: 8px;
            overflow: hidden;
            text-align: center;
            display: flex;
            flex-direction: column; /* 设置主轴为垂直方向 */
            align-items: center;
            justify-content: space-between;

            .follow-icon {
              width: 28px;
              height: 28px;
              display: block;
            }

            .follow-title {
              font-size: 12px;
              font-weight: 400;
              margin-bottom: 10px;
              display: block;
              margin-left: 8px;
              margin-top: 40px;
            }

            .follow-detail {
              width: 200px;
              text-align: center;
              padding-bottom: 20px;
              font-size: 12px;
            }
          }
          .table1:hover{
            border-bottom:6px solid black;
          }
          .table2:hover{
            border-bottom: 6px solid black;
          }

        }
      }

    }

    .category:hover {
      img {
        display: none
      }

      .reminder {
        display: block
      }
    }
  }

}
.table1:hover + .follow-detailTable1 {
  display: block !important; /* 如果.follow-detailTable1是.table1的直接相邻兄弟元素 */
}
.table1:hover ~ .follow-detailTable1 {
  display: block !important; /* 如果.follow-detailTable1是.table1的一个兄弟元素，不一定是直接相邻 */
}
.table2:hover +.follow-detailTable2{
 display: block !important;

}
.container {
  position: relative;
  height: 50px;
  width: 100%;
  /* 设置容器的宽高和其他样式 */
}

.form_compact {
  /deep/ .el-row {
    align-items: center;
    height: 60px;
    line-height: 70px;
  }

  /deep/ .el-input {
    margin-top: 0px !important;
  }

  /deep/ .el-input__inner {
    width: 100% !important;
    height: 50px !important;
    line-height: 50px !important;
  }

  width: 0100%;
  overflow: hidden;

  & /deep/ .el-input input {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
  }

  & /deep/ .el-button {
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
    margin-left: 1%;
  }
}

.uc-code-item-scan {
  .uc-qrcode {
    width: 120px;
    height: 130px;
    cursor: pointer;
    display: block;
    margin: 20px auto 16px;
  }

  .uc-code-scan-remark {
    font-size: 12px;
    line-height: 16px;
    text-align: center;

    color: #848b99;

    .uc-code-link-app {
      margin: 0 2px;
      color: #0052cc;
    }
  }
}

.navRow {
  /deep/ .el-col {
    height: 47px;
    display: block;
    position: relative
  }

  a:hover::after {
    opacity: 1;

    left: 5%;
  }

  .nav-3 {
    text-align: right;
  }

  .nav-3::after {
    content: ''; /* 这是必须的，即使没有内容 */
    position: absolute;
    left: -10%;
    opacity: 0;
    bottom: 2.5px; /* 位置设置在子菜单的底部外面 */;
    background: black;
    width: 70px;
    height: 2px;
    transition: all 0.3s;


  }

  .nav-1 {
    position: relative;

    .nav-A {
      display: block;
      height: 100%;
    }

    .nav-A:hover + .container {
      left: -160px;
      opacity: 1;

      .item {
        transform: translateY(0);
      }

    }

    .container {
      position: absolute;
      top: 101%;
      left: -180px;
      opacity: 0;
      width: 300px;
      min-height: 120px;
      background: white;
      z-index: 99;
      box-shadow: -0px 0px 3px rgba(0, 0, 0, 0.2);
      display: flex;
      flex-wrap: wrap;
      justify-content: space-between;
      box-sizing: border-box;
      padding: 20px;
      align-items: center;
      transition: all 0.5s;

      .item {
        height: 16px;
        line-height: 16px;
        text-align: center;
        transform: translateX(-15%);
        width: 30%;
        transition: all 0.1s;
        color: #848b99;
        font-size: 14px;
      }
    }


  }


  .nav-2 {
    position: relative;

    .nav-A {
      display: block;
      height: 100%;
    }

    .container {
      position: absolute;
      top: 100%;
      left: -16px;
      opacity: 0;
      width: 420px;
      min-height: 20px;
      height: 20px;
      background: white;
      z-index: 1;
      box-shadow: -0px 0px 3px rgba(0, 0, 0, 0.2);
      display: flex;
      flex-wrap: wrap;
      justify-content: flex-start;
      box-sizing: border-box;
      padding: 20px 20px;
      align-items: center;
      transition: opacity, left 0.5s;

      .item {
        height: 20px;
        line-height: 20px;
        text-align: left;
        transform: translateX(20%);
        font-size: 14px;
        width: 33%;
        transition: all 0.1s;
        color: #848b99;
      }
    }

  }

  .nav-A:hover + .container {
    z-index: 3;
    left: -180px;
    opacity: 1;
    height: 120px;
    min-height: 120px;

    .item {
      transform: translateY(0);
    }

  }
}

</style>
<style>
.el-carousel__indicators {
  list-style: none;
  margin: 0;
  padding: 0;
  text-align: center;
}

.el-carousel__indicator--horizontal {
  padding: 0;
}

.el-carousel__indicator {
  display: inline-block;
  margin: 20px 8px;
  border-radius: 50%; /* 创建圆形指示器 */
  width: 13px; /* 圆点宽度 */
  height: 13px; /* 圆点高度 */
  border: 1px solid white;
  background-color: transparent; /* 圆点颜色 */

}

.el-carousel__indicator.is-active {
  background-color: white; /* 当前活动圆点的颜色 */
}

.el-carousel__button {
  background: transparent;
}
</style>